#page-404{
	
	margin: 4% 0;
	.page404-content{
		width: 70%;
		border-right: 90px solid lighten(@color, 20);
		.skew(-25deg, 0);
		.page404-outline{
			width: auto;
			border-right: 90px solid lighten(@color, 10);
			.page404-center{
				width: auto;
				border-right: 90px solid @color;
				.page404-inner{
					width: 100%;
					.skew(25deg, 0);
					padding: 90px 0 90px 90px;
					a, span{
						display: inline-block;
					}
					.page404-logo{
						margin-bottom: 80px;
						clear: both;
					}
					.page404-detail{
						margin-bottom: 80px;
						clear: both;
						position: relative;
						.page404-title{
							color: @color;
							font-size: 90px;
							line-height: 90px;
							margin-right: 30px;
							&:after{
								content: "\f04b";
								font-family: FontAwesome;
								margin-left: 20px;
							}
						}
						.page404-middle{
							font-size: 25px;
							line-height: 30px;
							&:after{
								content: "\f0a9";
								font-family: FontAwesome;
								color: @color;
								font-size: 26px;
							}
						}
						.page404-button{
							background: url(../img/bt-404.png) no-repeat;
							width: 180px;
							height: 46px;
							text-align: center;
							font-size: 25px;
							color: #fff;
							position: absolute;
							right: -110px;
							top: 25px;
							line-height: 46px;
							
						}
					}
				}
			}
		}
	}
}
@media( max-width: 1199px ) and ( min-width: 980px ){
	#page-404 .page404-content{
		width: 80%;
	}
	#page-404 .page404-content .page404-outline .page404-center .page404-inner{
		padding: 90px 0 90px 50px;
		.page404-detail .page404-button{
			right: -160px;
		}
	}
}
@media( max-width: 979px ){
	#page-404 .page404-content{
		width: 80%;
		.skew(0, 0);
	}
	#page-404 .page404-content .page404-outline .page404-center .page404-inner{
		.skew(0, 0);
	}
}
@media( max-width: 767px ){
	#page-404 .page404-content{
		border: 0;
		width: 100%;
		text-align: center;
		.page404-outline{
			border: 0;
			 .page404-center{
			 	border: 0;
			 	.page404-inner{
			 		padding: 90px 0;
			 		.page404-detail{
			 			 .page404-button{
			 			 	margin: 0 auto;
			 			 	display: block;
			 			 	position: inherit;
			 			 	top: auto;
			 			 	right: auto;	
			 			 	background: @color;		
			 			 	background-image: none; 		
			 			 	.border-radius(5px);
			 			 	box-shadow: 1px 1px 2px @body-color;
			 			 	&:hover{	 	
			 			 		background: lighten(@color, 5);
			 			 	}
			 			 }
			 			 .page404-middle, .page404-title{
			 			 	margin-bottom: 50px;
			 			 }			 			 
			 		}
			 	}
			 }
		}
	}
}
@media(max-width: 480px){
	#page-404 .page404-content .page404-outline .page404-center .page404-inner .page404-detail .page404-title{
		margin: 0;
	}
}